<template>
	<div>
		<vxe-table border resizable :tree-config="{ children: 'children' }" :expand-config="tableExpand" :data="tableData">
			<vxe-table-column type="expand" width="100" title="详细信息">
				<template #content="{ row }">
					<div>
						<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">证书名称：</span>{{row.certificate}}
                  </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">证书类型：</span>{{row.type}}
                  </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">证书编号：</span>{{row.number}}
                  </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">发证机构：</span>{{row.tcb}}
                  </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">发证日期：</span>{{row.startdate}}
                  </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">到期日期：</span>{{row.enddate}}
                  </el-form-item>
								</el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">备案日期：</span>{{row.recorddate}}
                  </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">级别：</span>{{row.level}}
                  </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="24" :xl="4" class="mb20">
									<el-form-item label="">
                    <span style="color: #99a9bf">描述：</span>{{row.desc}}
                  </el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</template>
			</vxe-table-column>
			<vxe-table-column width="280" field="certificate" title="证书名称"></vxe-table-column>
			<vxe-table-column width="200" field="startdate" title="发证日期"></vxe-table-column>
			<vxe-table-column width="200" field="type" title="证书类型"></vxe-table-column>
			<vxe-table-column width="308" field="tcb" title="发证机构"></vxe-table-column>
		</vxe-table>
	</div>
</template>
<script lang="ts">
import { ref } from 'vue';
import { VxeTablePropTypes } from 'vxe-table';
import XEUtils from 'xe-utils';
import { useStore } from '/@/store/index.ts';
import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance } from 'vue';
import axios from 'axios';
export default {
	name: 'Work',
	setup() {
		const store = useStore();
		const state = reactive({
			form: {},
		});
		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});
		const tableData = ref([
			{
				certificate:'全国计算机软件专业技术资格和水平证书',
        type:'IT能力证书',
        number:'3318205100000',
        tcb:'国家人力资源和社会保障部',
        startdate:'2020年12月03日',
        enddate:'-',
        recorddate:'2019年12月03日',
        level:'初级资格',
        desc:'计算机技术与软件专业技术资格（水平）考试是原中国计算机软件专业技术资格和水平考试的完善与发展。这是由国家人力资源和社会保障部（原人事部）、工业和信息化部（原信息产业部）领导的国家级考试，其目的是，科学、公正地对全国计算机与软件专业技术人员进行职业资格、专业技术资格认定和专业技术水平测试。'
			},
      {
				certificate:'大学英语六级证书',
        type:'通用型证书',
        number:'191233009000000',
        tcb:'教育部考试中心',
        startdate:'2017年6月',
        enddate:'-',
        recorddate:'2017年6月',
        level:'512分',
        desc:'英语四六级考试是教育部主管的一项全国性的英语考试，其目的是对大学生的实际英语能力进行客观、准确的测量，为大学英语教学提供测评服务。'
			},
      {
				certificate:'大学英语六级证书',
        type:'通用型证书',
        number:'191233009000000',
        tcb:'教育部考试中心',
        startdate:'2016年6月',
        enddate:'-',
        recorddate:'2016年6月',
        level:'552分',
        desc:'英语四六级考试是教育部主管的一项全国性的英语考试，其目的是对大学生的实际英语能力进行客观、准确的测量，为大学英语教学提供测评服务。'
			},
      {
				certificate:'普通话水平测试等级证书',
        type:'通用型证书',
        number:'3318205104444',
        tcb:'浙江省语言文字工作委员会',
        startdate:'2016年12月03日',
        enddate:'-',
        recorddate:'2016年12月03日',
        level:'二级乙等',
        desc:'普通话水平测试等级证书是证明应试人普通话水平有效凭证，证书由国家语言文字工作委员会统一印制。普通话一级乙等以下成绩的证书由省（直辖市）级语言文字工作委员会加盖印章后颁发，普通话一级甲等的证书须经国家普通话水平测试中心审核并加盖国家普通话水平测试中心印章后方为有效。有效的普通话水平测试等级证书全国通用。'
			},
		]);

		const tableExpand = ref({
			lazy: true,
			loadMethod({ row }) {
				return new Promise((resolve) => {
					setTimeout(() => {
						// 随机生成列
						const childCols = XEUtils.sample(
							[
								{ type: 'seq', title: 'Sequence' },
								{ field: 'name', title: 'Name' },
								{ field: 'role', title: 'Role' },
								{ field: 'age', title: 'Age' },
								{ field: 'sex', title: 'Sex' },
							],
							XEUtils.random(3, 5)
						);
						// 随机生成数据
						const childData = XEUtils.sample(
							[
								{ name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
								{ name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
								{ name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
								{ name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
								{ name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
								{ name: 'TEST6', role: 'Develop', age: 30, sex: '男' },
							],
							XEUtils.random(1, 5)
						);
						row.childCols = childCols;
						row.childData = childData;
						resolve();
					}, 500);
				});
			},
		} as VxeTablePropTypes.ExpandConfig);
		return {
			tableData,
			tableExpand,
			getUserInfos,
			...toRefs(state),
		};
	},
	data() {
		return {
			StaffArchives: '',
		};
	},
	created() {
		// 设置一个间隔1s就进行的动作
		var that = this;
		axios.get('http://121.41.117.22:8081/staff-archives/staffname=' + that.getUserInfos.userName)
			.then(function (response) {
				that.StaffArchives = response.data[0];
			})
			.catch(function (err) {});
	},
};
</script>
<style lang="scss">
</style>